<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet/less" type="text/css" href="css/xStyle.less"/>
    <script type="text/javascript" src="js/lib/less.js"></script>
    <style>
        h1 {
            margin: 2rem;
        }
    </style>
</head>

<body>
<div>

    <div>
        <div>
            <div id='div1'></div>
        </div>
        <div>
            <div id="json1">

            </div>
        </div>
    </div>

    <div>
        <div>
            <div id='div2' class="border card"></div>
        </div>
        <div>
            <div id="json2">

            </div>
        </div>
    </div>

</div>
</body>
<script type="module">
    import xPanel from './js/src/xPanel.js';
   
 
    let binds1 = [{
        type: 'input',
        key: 'checkbox',  
        cfg: {   
        	type:'text',
            placeholder: '请输入宝宝姓名',
            mandatory: true
        },
        label: '姓名:'
    },
        {
            type: 'input',
            key: 'radio',
            cfg: {
                type : 'radio',
                data: [{code:1,name:'王子'},{code:1,name:'公主'}],
                mandatory: true
            },
            label: '性别:' 
        },
          {
            type: 'xDatePicker',
            key: 'radio',
            cfg: {
                type : 'datetime',
                format:"yyyy年M月d日 h点m分s秒",
                mandatory: true
            },
            label: '出生时间:' 
        },

        {
            type: 'groupInput',    
            key: 'mSelect',
            cfg: {
            	type:'text',
                placeholder: '请输入体重',
                mandatory: true,
                append:'kg'
            },
            label: '体重:'
        },
        {
            type: 'groupInput',
   
            key: 'xSelect',
            cfg: {
                placeholder: '请输入身高',              
                mandatory: true,
                append:'cm'
            },
            label: '身高:'
        } 
    ]

 
    new xPanel({
        el: "div2",
        style: "panel-v",
        binds: binds1,
        col: 'col-md-12',
        grid: 'container',
        obj: {},
              
    }).init();


</script>

</html>